<template>
  <div class="app-container">
    <el-row :gutter="20" class="question-edit-contain">
      <el-col :span="24">
        <el-card>
          <el-form
            :model="form"
            ref="form"
            label-width="100px"
            v-loading="formLoading"
            :rules="rules"
          >
            <el-row>
              <el-row :span="24" style="margin-bottom: 20px">
                <el-col :span="24">
                  <el-button
                    type="primary"
                    :size="defaultFormItemSize"
                    plain
                    @click="downloadTemplate()"
                    >下载导入模版</el-button
                  >
                </el-col>
              </el-row>
              <el-col :span="24">
                <el-upload
                  class="upload-demo"
                  drag
                  :before-upload="beforeUpload"
                  :on-change="handleChange"
                  action="#"
                  :auto-upload="false"
                  :multiple="false"
                  :file-list="fileList"
                  accept=".xls,.xlsx"
                  :limit="1"
                >
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                  <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件</div>
                </el-upload>
              </el-col>
            </el-row>
            <el-row style="margin-top: 20px">
              <el-col :span="24">
                <el-button type="primary" @click="submitForm()">导入</el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { SysUserController } from '@/api';
export default {
  name: 'formImportSysUser',
  data() {
    return {
      form: {
        file: null
      },
      fileList: [],
      formLoading: false,
      rules: {
        personnelType: [{ required: true, message: '请输入选择人员类型', trigger: 'change' }],
        moduleType: [{ required: true, message: '请输入选择模块类型', trigger: 'change' }],
        fileList: [{ required: true, message: '请上传数据文件', trigger: 'change' }]
      }
    };
  },
  created() {
    this.loadPersonnelTypeDropdownList();
    this.loadModuleTypeDropdownList();
  },
  methods: {
    beforeUpload(file) {
      console.log(111);
      if (this.fileList.length > 0) {
        this.fileList = [];
      }
      this.fileList.push(file);
      return true;
    },
    handleChange(file, fileList) {
      this.fileList = fileList;
    },
    onCancel(isSuccess = false) {
      if (this.observer != null) {
        this.observer.cancel(isSuccess);
      }
    },
    downloadTemplate() {
      SysUserController.downloadTemplate(this, {}, 'user_template.xls').then(response => {});
    },
    resetForm() {
      this.form = {
        personnelType: null,
        moduleType: null,
        file: this.fileList[0].raw
      };
      this.$refs['form'].resetFields();
    },
    submitForm() {
      console.log(this.fileList);
      let fd = {
        file: this.fileList[0].raw
      };

      SysUserController.upload(this, fd)
        .then(res => {
          this.$message.success('upload success.');
          this.onCancel(true);
        })
        .catch(e => {
          console.error(e);
        });
    }
  },
  mounted() {}
};
</script>
<style type="scss" scoped></style>
